<template>
  <view
    v-if="statusBarHeight && navBarHeight"
    class="navWraper"
    :style="{
      height: statusBarHeight + navBarHeight + 'px',
      background: `${background}`,
      zIndex: 999,
    }"
  >
    <view
      class="statusBar"
      :style="{
        height: statusBarHeight + 'px',
      }"
    ></view>
    <view
      class="nowAddress"
      :style="{
        height: navBarHeight + 'px',
        minHeight: navBarHeight + 'px',
        lineHeight: `${navBarHeight}}px`,
        bottom: `${navBarHeight}}px`,
      }"
    >
      <template v-if="isSlot">
        <slot></slot>
      </template>
      <template v-if="type">
        <component :is="CompMap.get(type)"></component>
      </template>
      <text class="nav-title" v-else>{{ title }}123123</text>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive, toRefs, onMounted } from 'vue'
import { calcNavBarInfo } from '@/utils/utils'
import { heaerType, CompMap } from './consts'
interface DataProps {
  statusBarHeight: number | null
  navBarHeight: number | null
}
interface headerProps {
  type?: heaerType
  isSlot?: boolean
  title: string
  background: string
}
const init = async () => {
  const { navBarHeight, statusBarHeight } = await calcNavBarInfo()
  state.navBarHeight = navBarHeight
  state.statusBarHeight = statusBarHeight as number
}
onMounted(() => {
  init()
})
const props = withDefaults(defineProps<headerProps>(), {
  title: '默认',
  background: 'linear-gradient(135deg, #FF7219 0%, #FF2C17 100%);',
})
const state = reactive<DataProps>({ statusBarHeight: null, navBarHeight: null })
const { statusBarHeight, navBarHeight } = toRefs(state)
const { title, background, isSlot } = toRefs(props)
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>
